<!--
 * @Author: xiaotiwen
 * @Date: 2020-06-22 10:33:05
 * @LastEditTime: 2020-06-28 19:15:41
 * @LastEditors: xiaotiwen
 * @FilePath: \eduweb\src\views\practiceManagement\practiceBase\index.vue
 * @Description: 实习基地统计
-->

<template>
    <div class="edu-page-warp">
        <condition-card @search="onSubmit" @reset="reset">
            <el-row>
                <el-col :span="8">
                    <el-form-item :label="$t('label.schoolTerm')">
                        <CalendarSelect v-model="condition.yearTerm" @load-done="loadDone" @change="calendarChange"></CalendarSelect>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
        <el-card shadow="never" body-style="padding: 24px;">
            <div class="edu-page-title"> {{$t('practiceBase.title.pageTitle')}}</div>
            <div class="edu-opertion-bar">
                <div class="float-right">
                    <!-- <el-dropdown @command="exportRecord">
                        <el-button type="primary">导出
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="1">导出实习基地统计表</el-dropdown-item>
                            <el-dropdown-item command="2">导出勾选记录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown> -->
                    <el-button type="primary" @click="exportRecord">{{$t('message.export')}}</el-button>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%" stripe @selection-change="selectionChange">
                <el-table-column type="selection" width="30"></el-table-column>
                <el-table-column width="50" align="center" type="index" :index="indexMethod" :label="$t('message.order')" fixed="left" ></el-table-column>
                <el-table-column :label="$t('label.college')" min-width="120" prop="academyName" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('practiceBase.label.baseInfoCount')" min-width="120" prop="baseInfoCount" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('practiceBase.label.validBaseCount')" min-width="120" prop="validBaseCount" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('practiceBase.label.invalidBaseCount')" min-width="120" prop="invalidBaseCount" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('practiceBase.label.brilliantBaseCount')" min-width="160" prop="brilliantBaseCount" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('practiceBase.label.signConBaseCount')" min-width="120" prop="signConBaseCount" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('practiceBase.label.acceptNum')" min-width="120" prop="acceptNum" show-overflow-tooltip></el-table-column>

            </el-table>
            <div class="edu-pagination">
                <div class="float-right">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNum_" :page-sizes="[20,50,100,500,1000]" :page-size="page.pageSize_" layout="total, sizes, prev, pager, next, jumper" :total="page.total_" style="float:right;margin-top:10px"></el-pagination>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
import { queryStatistics, exportStatistics } from "common/src/api/practiceManagement/internSetup";
export default {
    name: "practiceSetting",
    data() {
        return {
            disabled: false,
            type: "0",
            yearTerms: '',
            queryParams: {
                projectId: "",
                calendarId: ""
            },
            page: {
                pageNum_: 1,
                pageSize_: 20,
                total_: 0
            },

            condition: {
                yearTerm: ""
            },
            timeStr: {
                startStr: "",
                endStr: ""
            },
            auditLog: {},
            exportData: {
            },  //导出类型：0：根据条件导出，1：导出勾选条件
            tableData: [],
            ids: [],
            cultureSchemes: [],
            options: {
                dept: [],

            },
            value1: null,
            value2: null,
            rules: {
                value1: [{ required: true, message: this.$t('fundingManagement.tips.plzInput'), trigger: "blur" }],
            },

        };
    },
    mounted() {
        // this.searchList();
    },
    methods: {
        calendarChange() {
            this.searchList(true);
        },
        onSubmit(){
            this.searchList(true);
        },
        searchList(refresh) {
            if(refresh){
                this.page.pageNum_ = 1
            }
            queryStatistics(
                this.page.pageNum_,
                this.page.pageSize_,
                this.condition.yearTerm
            ).then(res => {
                if (res.code === 200) {
                    this.page.total_ = res.data.total;
                    this.tableData = res.data.records;

                }
            });
        },

        selectionChange(selection) {
            this.cultureSchemes = selection;

        },
        exportRecord(type) {
            if (this.cultureSchemes.length < 1) {
                this.exportData = {
                    exportType: 0,
                    exportCondition: {
                        yearTerm: this.condition.yearTerm
                    }
                }
            } else {
                this.exportData = {
                    exportType: 1,
                    rows: this.cultureSchemes,
                    exportCondition: {
                        yearTerm: this.condition.yearTerm,
                    }
                }
            }
            exportStatistics(this.exportData);

        },

        handleSizeChange(val) {
            this.page.pageSize_ = val;
            this.searchList();
        },
        handleCurrentChange(val) {
            this.page.pageNum_ = val;
            this.searchList();
        },
        reset() {
            this.condition.yearTerm = this.yearTerms;
            this.searchList(true);
        },
        loadDone(val) {
            this.yearTerms = this.condition.yearTerm;
            // this.searchList();
        },
        indexMethod(index) {
          return (this.page.pageNum_ - 1) * this.page.pageSize_ + index + 1;
        }
    }
};
</script>
<style lang="scss" scoped>
.details-table {
    border: 2px solid #e5e9f2;
}
.row-height {
    height: 50px;
    text-align: center;
    border-bottom: 1px solid #e5e9f2;
    .div-flex {
        display: flex;
        height: 100%;
        &.div-left {
            justify-content: flex-start;
        }
        .div-flex-left {
            flex: 1;
            text-align: right;
            height: 100%;
            border-right: 1px solid #e5e9f2;
            background-color: rgba(245, 247, 249, 1);
            line-height: 50px;
        }
        .div-flex-last-right {
            flex: 2;

            text-align: center;
            line-height: 50px;
        }
    }
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 100%;
}
.el-select {
    width: 100%;
}
</style>
